Bxslider 애니메이션중 클릭으로 애니메이션 전환 멈추고 다음으로 넘어가기
로빈아빠
본문
Stop Bxslider on Click when In Ticker Mode
var slider_config = {
minSlides: 4,
maxSlides: 4,
slideWidth: 170,
slideMargin: 10,
ticker: true,
speed: 30000,
tickerHover:true,
useCSS:false
}
var slider = $('.portfolio-slider').bxSlider(slider_config);
$('ul.portfolio-slider li').on({
click: function(e){
e.preventDefault();
$('a[rel*=facebox-cap]').facebox();
var slide_index = slider.getCurrentSlide();
slider_config['speed'] = 0;
slider_config['startSlide'] = slide_index;
slider.reloadSlider(slider_config);
},
mouseleave: function(e){
e.preventDefault();
var slide_index = slider.getCurrentSlide();
slider_config['speed'] = 30000;
slider_config['startSlide'] = slide_index;
slider.reloadSlider(slider_config);
}
});
변수를 활용해서 이동할때 클릭하면 즉시이동하게 처리하는방법
is_working_1 이 1이면 현재 애니메이션 중이라 즉시 이동시킴
<script>
$(document).ready(function() {
var current_1=0;
var is_working_1=0;
var slider_config = {
hideControlOnEnd: true,
captions: false,
autoControls: true,
stopAuto: true,
stopAutoOnClick: true,
pager: false,
auto: false,
speed: 800,
pause: 3000,
//mode:'fade',
nextText: '',
prevText: '',
startSlide:current_1,
onSlideBefore: function(){
is_working_1=1;
no=slider_1.getCurrentSlide();
set_slider_1(no);
},
onSlideAfter: function(){
is_working_1=0;
no=slider_1.getCurrentSlide();
set_slider_1(no);
}
}
var slider_1=$('#bxslider1 ul').bxSlider(slider_config);
$('.titles_line').on('click', function( event ) {
event.preventDefault();
var arr=$(this).attr('id').split('_');
if (is_working_1)
{
is_working_1=0;
slider_config['startSlide'] = arr[2];
set_slider_1(arr[2]);
slider_1.reloadSlider(slider_config);
}
else {
set_slider_1(arr[2]);
slider_1.goToSlide(arr[2]);
}
});
function set_slider_1(no) {
$('.titles_line').removeClass('on');
$('#news_lines_'+no).addClass('on');
//slider_1.stopAuto();
//slider_1.startAuto();
}
set_slider_1(0);
});
</script>
var slider_config = {
minSlides: 4,
maxSlides: 4,
slideWidth: 170,
slideMargin: 10,
ticker: true,
speed: 30000,
tickerHover:true,
useCSS:false
}
var slider = $('.portfolio-slider').bxSlider(slider_config);
$('ul.portfolio-slider li').on({
click: function(e){
e.preventDefault();
$('a[rel*=facebox-cap]').facebox();
var slide_index = slider.getCurrentSlide();
slider_config['speed'] = 0;
slider_config['startSlide'] = slide_index;
slider.reloadSlider(slider_config);
},
mouseleave: function(e){
e.preventDefault();
var slide_index = slider.getCurrentSlide();
slider_config['speed'] = 30000;
slider_config['startSlide'] = slide_index;
slider.reloadSlider(slider_config);
}
});
변수를 활용해서 이동할때 클릭하면 즉시이동하게 처리하는방법
is_working_1 이 1이면 현재 애니메이션 중이라 즉시 이동시킴
<script>
$(document).ready(function() {
var current_1=0;
var is_working_1=0;
var slider_config = {
hideControlOnEnd: true,
captions: false,
autoControls: true,
stopAuto: true,
stopAutoOnClick: true,
pager: false,
auto: false,
speed: 800,
pause: 3000,
//mode:'fade',
nextText: '',
prevText: '',
startSlide:current_1,
onSlideBefore: function(){
is_working_1=1;
no=slider_1.getCurrentSlide();
set_slider_1(no);
},
onSlideAfter: function(){
is_working_1=0;
no=slider_1.getCurrentSlide();
set_slider_1(no);
}
}
var slider_1=$('#bxslider1 ul').bxSlider(slider_config);
$('.titles_line').on('click', function( event ) {
event.preventDefault();
var arr=$(this).attr('id').split('_');
if (is_working_1)
{
is_working_1=0;
slider_config['startSlide'] = arr[2];
set_slider_1(arr[2]);
slider_1.reloadSlider(slider_config);
}
else {
set_slider_1(arr[2]);
slider_1.goToSlide(arr[2]);
}
});
function set_slider_1(no) {
$('.titles_line').removeClass('on');
$('#news_lines_'+no).addClass('on');
//slider_1.stopAuto();
//slider_1.startAuto();
}
set_slider_1(0);
});
</script>
댓글목록
등록된 댓글이 없습니다.